import React from 'react';
// import ReactDOM from 'react-dom';
import './TagCombobox.css';
import { Button as AntButton } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import Button from '@material-ui/core/Button';
import Autocomplete from '@material-ui/lab/AutoComplete';
import Chip from '@material-ui/core/Chip';
import TextField from '@material-ui/core/TextField';
import Popover from '@material-ui/core/Popover';                // 悬浮窗
import { makeStyles } from '@material-ui/core/styles';
import InputAdornment from '@material-ui/core/InputAdornment';  // Input前的内容

/** 构建样式 MaterialUI的动态构建 CSS样式类方法 */
// const useStyles = makeStyles((theme) => ({
//     root: {
//         width: 500,
//         '& > * + *': {
//             marginTop: theme.spacing(3),
//         },
//     },
// }));
// const classes = useStyles();    // 生成CSS类。这是一个 ReactHooks，只能在 render 或其他hooks方法中调用。

/** 标签列表。空标签是无效的。但多个空格是有效的。但不全为空格时，会被trim。 */
let tagList = ['艺术', '灰度', '浮雕', '肖像', '抽象', '现代', '其他']

class TagCombobox extends React.Component {

    constructor(props) {
        super(props);
        this.state = { value: new Array() };
        this.handleChange = this.handleChange.bind(this);   // 给此方法绑定this上下文

        this.state.anchorEl = null;                         // 弹出框的定位锚点元素
        this.handleChooseTagsBtnClick = this.handleChooseTagsBtnClick.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handlePopTagsBtnClick = this.handlePopTagsBtnClick.bind(this);
    }

    /**
     * 将处理 onchange 事件，实现从组件到state的更新
     * @param {*} event event.target 是发生后的值
     * @param {*} value 事件发生前的值 
     */
    handleChange(event, value) {
        this.setState({ value: value });   // 或 event.target.value
        // setState 有非常大的异步问题，如果此时输出 state，就能发现state还未更新
        console.log("TagComboboxChanged: " + value);
    }

    /**
     * 处理按钮点击事件
     * @param {*} event 
     */
    handleChooseTagsBtnClick(event) {
        console.log('点击了添加tag按钮！');
        this.setState({ anchorEl: event.currentTarget });
    }

    handleClose() {
        this.setState({ anchorEl: null });
    }

    /**
     * 处理点击弹出面板按钮的事件
     * @param {*} event 
     * @param {string} value 
     */
    handlePopTagsBtnClick(event, value) {
        console.log("点击了 [%O]！", value);
        let str = value;
        this.setState((preState) => {
            /** @type {string[]} */
            let preValue = preState.value;
            console.log('value before: ' + preValue);
            let idx = preValue.findIndex(val => str === val);
            console.log(idx);
            if (idx < 0) {
                preValue.push(str);
                console.log('value now: %O', preValue);
            } else {
                console.log('value now: %O', preValue);
                // 使用 splice 方法会导致 return 失效，无论是否执行此语句。
                // preValue = preValue.splice(idx, 1);
            }
            return { value: preValue }
        });
    }

    /**
     * 
     * @param {array} list 
     * @param {*} item 
     */
    compareList(list, item) {
        return list.findIndex(tag => tag === item) < 0 ? "outlined" : "contained";
    }

    render() {
        const width = this.props.width ? this.props.width : 'auto'; // 来自props
        const open = Boolean(this.state.anchorEl);
        const id = open ? 'simple-popover' : undefined;

        return (
            <div style={{
                display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', width: width
            }}>
                <Autocomplete
                    // className={classes.root}
                    freeSolo    // 自由输入
                    multiple    // 多选
                    id="tags-input"
                    options={tagList.map((option) => option)}   // 选项值来源，可通过此方式获取到对象数组的属性
                    defaultValue={[]}
                    renderTags={
                        (value, getTagProps) => value.map(
                            (option, index) => (
                                // label：标签文字 variant="outlined"
                                <Chip size="small" varient="filled" color="primary" label={option} {...getTagProps({ index })} />
                            ))
                    }
                    renderInput={(params) => (
                        // 有三种样式：standard、filled、outlined。区分大小写。
                        <TextField {...params} variant="standard" size="small"
                            label={(this.state.value.length > 0 ? "已选: " + this.state.value.length + " 个" : "标签")}
                            placeholder="回车输入"
                        // 无法在这里添加输入框前的图标，因为 AutoComplete 的 Tags 就是放在这里。
                        // InputProps={{
                        //     startAdornment: (
                        //         <InputAdornment position="start">
                        //             <PlusOutlined />
                        //         </InputAdornment>
                        //     ),
                        // }}
                        />
                    )}
                    // onChange={(event, value) => { console.log(value) }}
                    onChange={this.handleChange} // 绑定change事件，获取 Autocomplete 值
                    value={this.state.value}    // 实现 state 到组件的绑定
                />
                <AntButton aria-describedby={id} type="primary" icon={<PlusOutlined />} onClick={this.handleChooseTagsBtnClick}>选择标签</AntButton>
                {/* 严格模式报错，但懒得改了.Popover 基于 Modal */}
                <Popover
                    style={{ maxWidth: width, marginTop: '5px' }}
                    id={id}                         // 不知为何需要id
                    open={open}                     // 是否打开的绑定
                    anchorEl={this.state.anchorEl}  // 锚点位置
                    onClose={this.handleClose}      // 关闭事件
                    anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'right',
                    }}
                    transformOrigin={{
                        vertical: 'top',
                        horizontal: 'right',
                    }} >
                    <div style={{ padding: '5px' }}>
                        {tagList.map(item => {
                            return <Button variant={this.compareList(this.state.value, item)} color="primary" size="small" style={{ margin: '5px' }} key={item}
                                onClick={event => this.handlePopTagsBtnClick(event, item)}>{item}</Button>;
                        })}
                    </div>
                </Popover>
            </div >
        );
    }
}

export default TagCombobox;